<script setup lang="ts">
import TileItem from '@/components/tiles/item/TileItem.vue'

const props = defineProps({
    // 麻将牌编码
    tile: { type: String, required: true },
    transformStyle: {type: String, required: false}
}) 

let baseTransformStyle = "rotateX(-30deg) rotateY(260deg) rotateX(90deg) ";
let transformStyleArr = new Array();
for (var i = 0; i < 4; i++) {
  transformStyleArr.push(baseTransformStyle + "translateX(" + ((3-i) * 78)  + "px)" +" translateY(" + ((3-i) * -22) + "px)");
}  
</script>

<template>
  <div class="previous-ming-gang-group" :style="{'transform': props.transformStyle}">
    <TileItem :code="props.tile" :transformStyle="transformStyleArr[0]" :scale="0.8"></TileItem>
    <TileItem :code="props.tile" :transformStyle="transformStyleArr[1]" :scale="0.8"></TileItem>
    <TileItem :code="props.tile" :transformStyle="transformStyleArr[2]" :scale="0.8"></TileItem>
    <TileItem :code="props.tile" :transformStyle="transformStyleArr[3]" :scale="0.8"></TileItem>
  </div>
</template>

<style scoped>
.previous-ming-gang-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>
